<script setup>
import {ref,onMounted,onBeforeUnmount} from 'vue'
import {execAdmin} from "@/api/app.js";
import {createSheep} from '@/plugins/Sheep.js'

import bg from '@/components/bg/index.vue'
import textArr from '@/components/text/index.vue'
import {AppSetting} from '@/config/appConfig.js'

import bg1 from '@/assets/img/backgrounds/1.jpg'
import bg2 from '@/assets/img/backgrounds/2.jpg'
import bg3 from '@/assets/img/backgrounds/3.jpg'
import {ElMessage} from "element-plus";
let timer = null;

onMounted(()=>{
  // 定时创建小羊
  setInterval(createSheep, 1500);

  // 初次检测
  detection()

  timer = setInterval(()=>{
    detection()
  }, 20000);
})

onBeforeUnmount(() => {
  // 在组件卸载时清除定时器
  if (timer) {
    clearInterval(timer);
  }
});

let arr = [bg1,bg2,bg3]

const tipStr = "嗨，小伙伴。系统维护更新中"
const btnText = ref("检测")
const loding = ref(false)


const detection = ()=>{
  btnText.value = "检测..."
  execAdmin().then(res=>{
    if(res.code === 200){
      setTimeout(function (){
        window.location.href = AppSetting.targetUrl;
      },1000)
    }
    // ElMessage.success("成功")
  }).catch(e=>{
    btnText.value = "更新完成将自动跳转..."
    console.error(e)
    // ElMessage.error(e || "系统出错");
  })
}
</script>

<template>
  <bg :img-list="arr" />
  <textArr :text-arr="tipStr.split('')" >
    <input class="req" :disabled="loding" type="button"  :value="btnText" />
  </textArr>
  <div class="stage" id="stage"></div>
</template>

<style lang="scss" scoped>
.stage{
  position:fixed;
  bottom:0;
  width:100%;
  height:300px;
}

.req{
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #fdfdfd;
  transition: all 2.3s ease; /* 设置过渡效果 */
  &:hover{
    box-shadow: 0 0 30px 15px rgba(243, 243, 243, 0.8); /* 鼠标悬浮时发光效果 */
    background-color: rgba(243, 243, 243, 0.5);
  }
}




</style>